import { Controller, useForm } from "react-hook-form"
import WithAuth from "@/components/auth/WithAuth";
import Layout from "@/components/layouts/Layout";
import AppBar from "@/components/layouts/AppBar";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import { Select } from "@/components/elements/Fields";
import { useEffect, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { toast } from "react-hot-toast";
import { useRouter } from "next/router";

const validationSchema = Yup.object().shape({
  type: Yup.string().required('Harus di-pilih'),
  name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'),
  email: Yup.string().email('Format harus seperti johndoe@example.com').required('Harus di-isi'),
  mobile: Yup.string().required('Harus di-isi'),
  street: Yup.string().required('Harus di-isi'),
  zip: Yup.string().required('Harus di-isi'),
  city: Yup.string().required('Harus di-pilih'),
});

const types = [
  { value: 'contact', label: 'Contact Address' },
  { value: 'invoice', label: 'Invoice Address' },
  { value: 'delivery', label: 'Delivery Address' },
  { value: 'other', label: 'Other Address' },
];

export async function getServerSideProps( context ) {
  const { id } = context.query;
  const address = await apiOdoo('GET', `/api/v1/partner/${id}/address`);
  let defaultValues = {
    type: address.type, 
    name: address.name, 
    email: address.email,
    mobile: address.mobile,
    street: address.street,
    zip: address.zip,
    city: address.city?.id || '',
    oldDistrict: address.district?.id || '',
    district: '',
    oldSubDistrict: address.sub_district?.id || '',
    subDistrict: '',
  };
  return { props: { id, defaultValues } };
}

export default function EditAddress({ id, defaultValues }) {
  const router = useRouter();
  const { 
    register, 
    formState: { errors }, 
    handleSubmit,
    watch,
    setValue,
    getValues,
    control,
  } = useForm({ 
    resolver: yupResolver(validationSchema),
    defaultValues
   });

  const [ cities, setCities ] = useState([]);
  const [ districts, setDistricts ] = useState([]);
  const [ subDistricts, setSubDistricts ] = useState([]);

   useEffect(() => {
     const loadCities = async () => {
       let dataCities = await apiOdoo('GET', '/api/v1/city');
      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }));
      setCities(dataCities);
    };
    loadCities();
  }, []);
  
  const watchCity = watch('city');
  useEffect(() => {
    setValue('district', '');
    if (watchCity) {
      const loadDistricts = async () => {
        let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${watchCity}`);
        dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name }));
        setDistricts(dataDistricts);
        let oldDistrict = getValues('oldDistrict');
        if (oldDistrict) {
          setValue('district', oldDistrict);
          setValue('oldDistrict', '');
        }
      };
      loadDistricts();
    }
  }, [ watchCity, setValue, getValues ]);
  
  const watchDistrict = watch('district');
  useEffect(() => {
    setValue('subDistrict', '');
    if (watchDistrict) {
      const loadSubDistricts = async () => {
        let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${watchDistrict}`);
        dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name }));
        setSubDistricts(dataSubDistricts);
        let oldSubDistrict = getValues('oldSubDistrict');
        if (oldSubDistrict) {
          setValue('subDistrict', oldSubDistrict);
          setValue('oldSubDistrict', '');
        }
      };
      loadSubDistricts();
    }
   }, [ watchDistrict, setValue, getValues ])

   const onSubmitHandler = async (values) => {
    const parameters = {
      ...values,
      city_id: values.city,
      district_id: values.district,
      sub_district_id: values.subDistrict
    }

    const address = await apiOdoo('PUT', `/api/v1/partner/${id}/address`, parameters);
    if (address?.id) {
      toast.success('Berhasil mengubah alamat');
      router.back();
    }
   };

  return (
    <WithAuth>
      <Layout>
        <AppBar title="Ubah Alamat" />

        <form className="p-4 flex flex-col gap-y-4" onSubmit={handleSubmit(onSubmitHandler)}>
          <div>
            <label className="form-label mb-2">Label Alamat</label>
            <Controller
              name="type"
              control={control}
              render={props => <Select {...props} isSearchable={false} options={types} />}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.type?.message }</div>
          </div>

          <div>
            <label className="form-label mb-2">Nama</label>
            <input
              {...register('name')}
              placeholder="John Doe"
              type="text"
              className="form-input"
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.name?.message }</div>
          </div>

          <div>
            <label className="form-label mb-2">Email</label>
            <input
              {...register('email')}
              placeholder="johndoe@example.com"
              type="email"
              className="form-input"
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.email?.message }</div>
          </div>

          <div>
            <label className="form-label mb-2">Mobile</label>
            <input
              {...register('mobile')}
              placeholder="08xxxxxxxx"
              type="tel"
              className="form-input"
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.mobile?.message }</div>
          </div>

          <div>
            <label className="form-label mb-2">Alamat</label>
            <input
              {...register('street')}
              placeholder="Jl. Bandengan Utara 85A"
              type="text"
              className="form-input"
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.street?.message }</div>
          </div>

          <div>
            <label className="form-label mb-2">Kode Pos</label>
            <input
              {...register('zip')}
              placeholder="10100"
              type="number"
              className="form-input"
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.zip?.message }</div>
          </div>

          <div>
            <label className="form-label mb-2">Kota</label>
            <Controller
              name="city"
              control={control}
              render={props => <Select {...props} options={cities} />}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.city?.message }</div>
          </div>

          <div>
            <label className="form-label mb-2">Kecamatan</label>
            <Controller
              name="district"
              control={control}
              render={props => (
                <Select 
                  {...props} 
                  options={districts} 
                  disabled={!watchCity}
                />
              )}
            />
          </div>

          <div>
            <label className="form-label mb-2">Kelurahan</label>
            <Controller
              name="subDistrict"
              control={control}
              render={props => (
                <Select 
                  {...props} 
                  options={subDistricts} 
                  disabled={!watchDistrict}
                />
              )}
            />
          </div>

          <button 
            type="submit" 
            className="btn-yellow mt-2 w-full"
          >
            Simpan
          </button>
        </form>
      </Layout>
    </WithAuth>
  )
}